<template>
  <div class="number-counter">
    <el-input-number v-model="count" :min="min" :max="max" :step="step" @change="handleChange" />
  </div>
</template>
<script setup>
import { ref, watchEffect } from 'vue';

// 组件属性定义
const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: 0
  },
  min: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 100
  },
  step: {
    type: Number,
    default: 1
  }
});

// 组件内部状态
const count = ref(props.modelValue);

// 监听props的变化
watchEffect(() => {
  count.value = props.modelValue;
});

// 处理数值变化
const handleChange = (newCount) => {
  // 发射更新事件
  emit('update:modelValue', newCount);
};

// 组件事件发射
const emit = defineEmits(['update:modelValue']);
</script>
<style scoped>
.number-counter {
  display: flex;
  align-items: center;
}

.el-input-number {
  width: 215px;
}
</style>
